<!--

    Licensed to the Apache Software Foundation (ASF) under one or more
    contributor license agreements.  See the NOTICE file distributed with
    this work for additional information regarding copyright ownership.
    The ASF licenses this file to You under the Apache License, Version 2.0
    (the "License"); you may not use this file except in compliance with
    the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Legume REST service</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wingcss/0.1.8/wing.min.css"/>
    <!-- Load AngularJS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
      var app = angular.module("LegumeManagement", []);

      //Controller Part
      app.controller("LegumeManagementController", function ($scope, $http) {

        //Initialize page with default data which is blank in this example
        $scope.legumes = [];

        //Now load the data from server
        _refreshPageData();

        /* Private Methods */
        //HTTP GET- get all legumes collection
        function _refreshPageData() {
          $http({
            method: 'GET',
            url: '/legumes'
          }).then(function successCallback(response) {
            $scope.legumes = response.data;
          }, function errorCallback(response) {
            console.log(response.statusText);
          });
        }

        function _success(response) {
          _refreshPageData();
        }

        function _error(response) {
          alert(response.data.message || response.statusText);
        }
      });
    </script>
</head>
<body ng-app="LegumeManagement" ng-controller="LegumeManagementController">

<div class="container">
    <h1>REST Service - Legume</h1>

    <h3>Legume List</h3>
    <div class="row">
        <div class="col-4">Name</div>
        <div class="col-8">Description</div>
    </div>
    <div class="row" ng-repeat="legume in legumes">
        <div class="col-4">{{ legume.name }}</div>
        <div class="col-8">{{ legume.description }}</div>
    </div>
</div>

</body>
</html>
